window.onload = function () {
    // 需求分析：
    // 1 鼠标移入focus 显示 向左 向右箭头 移出时隐藏
    // 2 动态生成小圆点，且点击时 高亮相应切换
    // 3 点击小圆点时 能切换到对应轮播图
    // 4 点击向左 向右箭头  会分别切换到 上一张、下一张
    // 5 点击向左向右时，小圆点也会相应切换，且点击向左向右和点击小圆点 能互相关联
    // 6 自动播放(代码模拟 播放 下一张)
    // 7 鼠标移入focus，停止自动播放 鼠标移出focus后，轮播图自动播放
  
    // 获取元素：
    var focus = document.querySelector(".focus");
    var left = document.querySelector(".arrow-l");
    var right = document.querySelector(".arrow-r");
  
    var ul = document.querySelector(".focus ul");
    var ol = document.querySelector(".focus ol.circle");
  
    //关键参数 单张轮播图宽度
    var w = focus.offsetWidth;
    //  num标记播放到哪一张
    var num = 0;
    //  circle标记哪个小圆圈高亮
    var circle = 0;
    // 自动播放定时器
    var timer = null;
    //   节流阀
    var flag = true;
  
    //鼠标移入focus显示向左向右箭头且停止自动播放，移出隐藏并恢复自动播放
    focus.onmouseenter = function () {
      left.style.display = "block";
      right.style.display = "block";
      clearInterval(timer);
    };
    focus.onmouseleave = function () {
      left.style.display = "none";
      right.style.display = "none";
      autoplay();
    };
    //将第一张clone一份，放到ul的最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
  
    //   点击left播放上一张 ,
    left.onclick = function () {
      // if (flag) {
      flag = false;
      //若已播放到真的第一张(再上一张就没了)时，快速移动到clone的第一张，并将num变成ul.children.length-1
      if (num == 0) {
        num = ul.children.length - 1;
        ul.style.left = -num * w + "px";
      }
      num--;
      // 移动到下一张
      animate(ul, -w * num, function () {
        flag = true;
      });
    };
  
    //   点击right播放下一张 ,
    right.onclick = function () {
      // if (flag) {
      flag = false;
      //若已播放到最后一张(其实是clone的第一张)时，快速移动到真的第一张，并将num还原为0
      if (num == ul.children.length - 1) {
        ul.style.left = 0;
        num = 0;
      }
      num++;
      // 移动到下一张
      animate(ul, -w * num, function () {
        flag = true;
      });
    };
  
    //自动播放
    function autoplay() {
      timer = setInterval(function () {
        right.click();
      }, 2000);
    }
    autoplay();
    function highlight() {
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = "";
      }
      ol.children[circle].className = "current";
    }
  };